<template>
  <div class="productList">
    <nav class="navclass">
      <div class="search">
        <el-input class="elinput" v-model="searchList.productname" placeholder="请输入商品名称"></el-input>
        <el-input class="elinput" v-model="searchList.productmodel" placeholder="请输入商品型号"></el-input>
        <el-select v-model="searchList.producttype" placeholder="请选择商品类型">
          <el-option
            v-for="item in productList"
            :key="item._id"
            :label="item.name"
            :value="item._id">
          </el-option>
        </el-select>
        <el-select v-model="searchList.operator" placeholder="请选择操作人">
          <el-option
            v-for="item in userList"
            :key="item._id"
            :label="item.username"
            :value="item._id">
          </el-option>
        </el-select>
      </div>
      <div class="btn">
        <el-button type="primary">查询</el-button>
        <el-button type="success" @click="dialogVisible=true">新增</el-button>
      </div>
    </nav>
    <main>
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="img"
          label="商品图片"
        >
          <template slot-scope="scope">
            <img :src="scope.row">
          </template>
        </el-table-column>
        <el-table-column
          prop="shopname"
          label="商品名称">
        </el-table-column>
        <el-table-column
          prop="shopType"
          label="商品类型">
        </el-table-column>
        <el-table-column
          prop="manufacturers"
          label="厂家">
        </el-table-column>
        <el-table-column
          prop="purchasingPrice"
          label="进货价">
        </el-table-column>
        <el-table-column
          prop="inventory"
          label="库存">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格">
        </el-table-column>
        <el-table-column
          prop="vipPrice"
          label="vip价格">
        </el-table-column>
        <el-table-column
          prop="operator"
          label="操作人">
        </el-table-column>
        <el-table-column
          prop="productsIntroduction"
          label="商品介绍">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注">
        </el-table-column>
      </el-table>
    </main>
    <div class="fileUpload">
      <!--      新增商品弹窗-->
      <el-dialog
        title="新增商品"
        :visible.sync="dialogVisible"
        width="45%">
        <el-form ref="tableFrom" label-position="left" label-width="80px" :rules="rules" :model="tableFrom">
          <el-form-item label="商品名称" prop="shopname">
            <el-input v-model="tableFrom.shopname" placeholder="请输入商品名称"></el-input>
          </el-form-item>
          <div class="select">
            <el-form-item label="商品类型" prop="shopType">
              <el-select v-model="tableFrom.shopType" placeholder="请选择商品类型">
                <el-option
                  v-for="item in productList"
                  :key="item._id"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否热门">
              <el-switch
                v-model="tableFrom.is_hot"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
          </div>
          <el-form-item label="生产厂家" prop="manufacturers">
            <el-input v-model="tableFrom.manufacturers" placeholder="请输入生产厂家"></el-input>
          </el-form-item>
          <el-form-item label="进货价格" prop="purchasingPrice">
            <el-input type="number" v-model="tableFrom.purchasingPrice" placeholder="请输入进货价格"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="inventory">
            <el-input type="number" v-model="tableFrom.inventory" placeholder="请输入商品数量"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="price">
            <el-input type="number" v-model="tableFrom.price" placeholder="请输入商品价格"></el-input>
          </el-form-item>
          <el-form-item label="批发价格" prop="vipPrice">
            <el-input type="number" v-model="tableFrom.vipPrice" placeholder="请输入批发价格"></el-input>
          </el-form-item>
          <el-form-item label="图片上传">
            <el-upload
              class="upload-demo"
              :file-list="fileList"
              :auto-upload="false"
              :on-remove="handleRemove"
              :on-change="handleChange">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品介绍">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入商品介绍"
              v-model="tableFrom.productsIntroduction">
            </el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="tableFrom.remark" placeholder="请输入备注信息"></el-input>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCommod('tableFrom')">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { ajax } from '@/config/user'

export default {
  name: 'productList',
  data () {

    return {
      dialogVisible: false,
      fileList: [],
      tableFrom: {
        img: [],
        shopname: null,
        shopType: null,
        manufacturers: null,
        purchasingPrice: null,
        inventory: null,
        price: null,
        vipPrice: null,
        is_hot: false,
        operator: null,
        productsIntroduction: '',
        remark: ''
      },
      tableData: [{
        img: null,
        shopname: '商品名称',
        shopType: '商品类型（大的类型例如：监控，道闸等。。。）',
        manufacturers: '厂家',
        purchasingPrice: '进货价',
        inventory: '库存',
        price: '价格',
        vipPrice: 'vip价格',
        is_hot: false,
        operator: '操作人',
        productsIntroduction: '商品介绍',
        remark: '备注'
      },],
      searchList: {
        productname: null,
        producttype: null,
        productmodel: null,
        operator: null,
      },
      options: null,
      userList: null,
      productList: null,
      rules: {
        shopname: [
          {
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          }
        ],
        shopType: [
          {
            required: true,
            message: '请选择商品类型',
            trigger: 'blur'
          }
        ],
        manufacturers: [
          {
            required: true,
            message: '请输入生产厂家',
            trigger: 'blur'
          }
        ],
        purchasingPrice: [
          {
            required: true,
            message: '请输入进货价格',
            trigger: 'blur'
          }
        ],
        inventory: [
          {
            required: true,
            message: '请输入库存数量',
            trigger: 'blur'
          }
        ],
        price: [
          {
            required: true,
            message: '请输入商品价格',
            trigger: 'blur'
          }
        ],
        vipPrice: [
          {
            required: true,
            message: '请输入vip价格',
            trigger: 'blur'
          }
        ],
      },
      searchProuduct:{
        pageSize:10,
        pageNum:1,
      }

    }
  },
  mounted () {
    this.getUserList()
    this.getTypeList()
    this.searchProuductList()
  },
  methods: {
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    getUserList () {
      ajax.getenumeration().then(res => {
        const { data } = res.data
        this.userList = data
      })
    },
    getTypeList () {
      ajax.gettypeList().then(res => {
        const { data } = res.data
        this.productList = data
        console.log(this.productList)
      })
    },
    //图片上传
    async submitUpload () {
      const filesObj = this.fileList
      const fileForm = new FormData()
      for (var i = 0; i < filesObj.length; i++) {
        fileForm.append('files', filesObj[i].raw)
      }
      const res = await ajax.uploadCommodity(fileForm)
      const { data, code } = res.data
      console.log(data)
      if (code == 200) {
        this.tableFrom.img = data.join(',')
      }
    },
    handleChange (file, fileList) {
      this.fileList = fileList
    },
    handleRemove (file, fileList) {
      this.fileList = fileList
    },
    addCommod (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
         await this.submitUpload()
          this.tableFrom.operator=sessionStorage.getItem('username')
          ajax.addcimmidity(this.tableFrom).then(res=>{
            const {data,code,msg}=res.data
            if (code==200){
              this.$message.success(msg)
              this.searchProuductList()
            }else {
              this.$message.warning(msg)
            }
          })
        } else {
          this.$message.error('请检查是否输入正确')
        }
      })
    },
    //商品列表查询
    async searchProuductList(){
      const res=await ajax.searchCimmidity(this.searchProuduct)
      const {data,code,msg}=res.data
      if (code == 200) {
        this.tableData=data

        const img=data[0].img[0].split(',')
        this.tableData.img=img[0]
        console.log(this.tableData.img)
        this.$message.success(msg)
      }
    }
  }
}
</script>

<style scoped lang="scss">

.productList {
  nav {
    display: flex;

    .search {
      display: flex;
      align-items: center;

      .elinput {
        width: 200px;
        margin: 0 10px;
      }
    }

    .btn {
      margin-left: 20px;
    }
  }

  main {
    ::v-deep .warning-row {
      background: oldlace !important;
    }

    ::v-deep .success-row {
      background: #f0f9eb !important;
    }
  }

  .fileUpload {
    .select {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
</style>
